// 详情页逻辑

// 0. 获取元素
const infoBox = document.querySelector('.info')
const detailBox = document.querySelector('.detail')


// 1. 拿到 sessionStorage 内的 id 信息
const goodsId = window.sessionStorage.getItem('goods_id')


// 2. 根据 goodsId 去请求商品详情
getGoodsInfo()
async function getGoodsInfo() {

  const res = await pAjax({
    url: 'http://localhost:8888/goods/item',
    data: `id=${goodsId}`,
    dataType: 'json',
  })

  console.log(res)

// infoBox.innerHTML = `
// <div class="left">
// <!-- 放大镜 -->
//   <div class="box" id="box">
//       <!-- 展示图片的盒子 -->
//       <div class="show">
//       <img src="${ res.info.img_big_logo }" alt="">
//       <div class="mask"></div>
//       </div>
//       <!-- 列表盒子 -->
//       <div class="list">
//       <p class="active">
//           <img
//           src="${ res.info.img_big_logo }"
//           data-show="${ res.info.img_big_logo }"
//           data-enlarge="${ res.info.img_big_logo }"
//           alt="">
//       </p> 
//       </div>
//       <!-- 放大的盒子 -->
//       <div class="enlarge"></div>
//   </div>
// </div>
// <div class="right">
// <div class="desc">${ res.info.title }</div>
// <div class="price"> ${ res.info.current_price }</div>
// <button>加入购物车</button>
// </div>
// </div>
// `
infoBox.innerHTML = `
<div class="left">
<!-- 放大镜 -->
  <div class="box" id="box">
      <!-- 展示图片的盒子 -->
      <div class="show">
      <img src="${ res.info.img_big_logo }" alt=""> 
      <div class="mask"></div>
      </div>
      <!-- 列表盒子 -->
      <div class="list">
      <p class="active">
          <img
          src="${ res.info.img_big_logo }"
          data-show="${ res.info.img_big_logo }"
          data-enlarge="${ res.info.img_big_logo }"
          alt="">
      </p> 
      </div>
      <!-- 放大的盒子 -->
      <div class="enlarge"></div>
  </div>
</div>


<div class="right">
<div class="desc">${ res.info.title }</div>
<div class="price"> 价格 <span>${ res.info.current_price }</span> </div>
<p class="pp">销量<span>${res.info.goods_number}</span></p>  
<p class="p1">配送<span>北京科技职业学院</span></p>
  
  <p>
       <button>立即购买</button>
      <button>加入购物车</button>
  </p>
  <p class="p2">承诺<span>七天无理由</span>
      <span>公益宝贝</span>
    
  </p>
  <p class="p3">支付<span>蚂蚁花呗</span>
      <span>信用卡支付</span>
      <span>集分宝</span></p>
</div>

`
  detailBox.innerHTML = res.info.goods_introduce
  
  new Enlarge('#box')
}

//加入购物车
 const rightBox = document.querySelector('.right')
 rightBox.addEventListener('click', async e => { 
   e = e || window.event
   const target = e.target || e.srcElement

   //判断点击的是 li 标签的类名
//    if (target.tagName === 'BUTTON') {
//      // 在跳转页面的时候, 最好把商品id 带到新的详情页面
//      const id = target.dataset.id
//     // 存储在 sessionStorage 里面
//      window.sessionStorage.setItem('goods_id', id)
//      // 跳转页面
//      window.location.href = './detail.html'
//    }

   // 4-2. 判断点击的是 加入购物车 按钮
   if (target.tagName === 'BUTTON') {
     // 4-2-1. 拿到 localStorage 内部是不是有 id 和 token
     // 如果没有, 去到登录页
     const id = window.localStorage.getItem('id')
     const token = window.localStorage.getItem('token')

     // 4-2-2. 判断 id 和 token 是否存在
     if (!id || !token) {
       const result = window.confirm('您还没有登录, 点击确定跳转到登录页, 点击取消稍后在购买 !')
       // 跳转之前, 标识一下 url 信息
       window.localStorage.setItem('url', 'detail')

       // 跳转回到登录页
       if (result) window.location.href = './login.html'
       return
     }

     // 4-2-3. 拿到当前的商品 id
     const goodsId = target.dataset.id

     // 4-2-4. 发送请求加入购物车
     const res = await pAjax({
       url: 'http://localhost:8888/cart/add',
       token,
       data: `id=${id}&goodsId=${goodsId}`,
       method: 'post',
       dataType: 'json'
     })
    
    console.log(res)
     // 4-2-4. 提示用户
     if (res.code === 1) window.alert('加入购物车成功了')

     // 4-2-5. 加入不成功的时候, 提示用户
     if(res.code != 1) window.alert("加入购物车失败")
   }
 })